<template>

      <div class="info">
        <div v-if="compile">
          <el-form   :model="form" label-width="65px" label-position="left" >
            <!--        昵称-->
            <div style="margin: 20px 0" />
            <el-row>
              <el-form-item label="昵称" style="width:75%">
                <el-input v-model="form.username" placeholder="昵称" :disabled="disabled" />
              </el-form-item>
            </el-row>
            <!--        姓名-->
            <div style="margin: 20px 0" />
            <el-row>
              <el-form-item label="姓名"  style="width:75%">
                <el-input v-model="form.name" placeholder="姓名" />
              </el-form-item>
            </el-row>
            <div style="margin: 20px 0" />
            <!--        性别-->
            <el-row :gutter="70">
              <el-col span="10"> 性别</el-col>
              <el-radio-group v-model="form.gender">
                <el-row :gutter="50">
                  <el-col span="5" >
                    <el-radio label="0" size="large"  border>男</el-radio>
                  </el-col>
                  <el-col span="5">
                    <el-radio label="1" size="large" border>女</el-radio>
                  </el-col>
                </el-row>
              </el-radio-group>
            </el-row>

            <!--        身份-->
            <div style="margin: 20px 0" />

            <el-row :gutter="70">
              <el-col span="4">身份</el-col>
              <el-radio-group v-model="form.role">
                <el-row :gutter="20">
                  <el-col span="5" >
                    <el-radio label="0" size="large"  border>传承人</el-radio>
                  </el-col>
                  <el-col span="5">
                    <el-radio label="1" size="large" border>读者</el-radio>
                  </el-col>
                </el-row>
              </el-radio-group>
            </el-row>

            <!--        年龄-->
            <div style="margin: 20px 0" />
            <el-row :gutter="35">
              <el-col span="6">
                年龄
              </el-col>
              <el-col span="6">
                <el-input-number v-model="form.age"  :min="0" :max="100" @click=""  size="large" label="年龄"/>
              </el-col>
            </el-row>


            <!--        电话号-->
            <div style="margin: 20px 0" />
            <el-row >
              <el-form-item label="电话"  style="width:75%">
                <el-input v-model="form.phone" placeholder="请输入你的电话号码" />
              </el-form-item>
            </el-row>

            <!--        地址-->
            <div style="margin: 20px 0" />
            <el-row :gutter="35">
              <el-col span="4">
                地址
              </el-col>
              <el-col span="16">
                <el-cascader
                    placeholder="请选择地区"
                    size="default"
                    :options="regionData"
                    v-model="selectedOptions"
                    @change="handleChange()"
                    style="width:75%"
                >
                </el-cascader>
              </el-col>
            </el-row>
            <!--        个人简介-->
            <div style="margin: 20px 0" />
            <el-row :gutter="10">
              <el-col span="4">
                个人简介
              </el-col>
              <el-input
                  v-model="form.synopsis"
                  :rows="2"
                  type="textarea"
                  size="default"
                  maxlength="30"
                  show-word-limit
                  placeholder="Please input"
                  style="width:70%"
              />
            </el-row>
            <div style="margin: 30px 0" />
            <el-button type="success" style="float:left;margin-left: 20%" @click="onSubmit">取消</el-button>
            <el-button type="success" style="float:right;margin-right: 35%  " @click="onSubmit" >保存</el-button>
          </el-form>
        </div>
        <div v-else>
          <el-descriptions
              class="margin-top"
              title="个人信息"
              :column="1"
              :border="true"
              :size="large"
              :style="blockMargin"
              label-align="right"
              align="center"
              width="10px"

          >
            <template #extra>
              <el-button type="primary" @click="toCompile">去编辑</el-button>
            </template>
            <el-descriptions-item label="昵称" >{{form.username}}</el-descriptions-item>
            <div style="margin: 20px 0" />
            <el-descriptions-item label="姓名">{{form.name}}</el-descriptions-item>
            <el-descriptions-item label="性别">{{form.gender}}</el-descriptions-item>
            <el-descriptions-item label="密码">{{form.password}}</el-descriptions-item>
            <el-descriptions-item label="身份">{{form.role}}</el-descriptions-item>
            <el-descriptions-item label="年龄">{{form.age}}</el-descriptions-item>
            <el-descriptions-item label="电话">{{form.phone}}</el-descriptions-item>
            <el-descriptions-item label="住址">{{form.adderss}}</el-descriptions-item>
            <el-descriptions-item label="个人简介"
            >{{form.synopsis}}
            </el-descriptions-item>
          </el-descriptions>
        </div>

      </div>

</template>

<script setup>
import {reactive, ref} from 'vue'
import {regionData} from 'element-china-area-data'

const form = reactive({
  username:ref('小向'),
  password:ref('123456'),
  name: ref('想想'),
  role:ref(1),
  adderss:ref('百慕大'),
  gender:ref('女'),
  phone:ref(13457832914),
  age:ref(20),
  avater:ref(''),
  synopsis:ref('这人很懒，什么也没留下'),
})


const compile=ref(false);


const toCompile = () => {
  compile.value= true;

}
const onSubmit = () => {
  compile.value=false;

}

const handleChange = (value) => {
  form.adderss=value
}

</script>

<style  lang="less" scoped>
.info{
  width: 90%;
  height: auto;
  background-color: rgb(209, 205, 173);
  word-break:break-all;
}

.el-descriptions {
  margin-top: 20px;
  width: 100%;

}

.cell-item {
  display: flex;
  align-items: center;

}
.margin-top {
  margin-top: 20px;
  width: 100%;
}


</style>